import React from 'react'
import style from './style.module.css'
import Navbar from '../../../../components/Navbar/Index'
import img from '../../../../static/my_icon/007_法律法务.png'
import { CheckShieldOutline } from 'antd-mobile-icons'
import red from '../../../../static/my_icon/007_VR眼镜.png'
import blue from '../../../../static/my_icon/007_人力招聘.png'
import green from '../../../../static/my_icon/007_版权著作.png'
import yellow from '../../../../static/my_icon/007_登记记录.png'
import { BellOutline, RightOutline } from 'antd-mobile-icons'


function FlatHunting({ }) {
    return (
        <div style={{
            width: '100vw',
            height: '100vh',
            backgroundColor: '#F7F7F7'
        }}>
            <Navbar title='找 房' nav_footer={<div style={{ height: '60px' }}></div>}></Navbar>
            <div style={{ height: '330px', position: 'relative' }}>
                <div className={style['status_box']}>
                    <div className={style['status_box_title']}>
                        帮我找房
                    </div>
                    <div className={style['status_box_container']}>
                        <div className={style['form_box']}>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                height: '40px'
                            }}>
                                <img src={img} alt="" style={{ width: '25px' }} />
                                <input type="text" placeholder='请输入意向城市、区域、意向楼盘' style={{ width: '250px' }} />
                            </div>
                            <div style={{
                                width: '100%',
                                height: '2px',
                                borderRadius: '50%',
                                background: 'rgba(211,211,211,0.3)',
                            }}></div>
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    height: '60px'
                                }}
                            >
                                <input type="text" placeholder='请输入姓名' style={{ paddingLeft: '15px', width: '100px' }} />
                                <div style={{
                                    width: '2px',
                                    height: '35px',
                                    background: 'rgba(211,211,211,0.6)',
                                    borderRadius: '1px',
                                    opacity: '0.6'
                                }}></div>
                                <input type="text" placeholder='请输入手机号' style={{ paddingLeft: '5px', width: '140px' }} />
                            </div>
                            <div style={{
                                width: '100%',
                                height: '2px',
                                borderRadius: '50%',
                                background: 'rgba(211,211,211,0.3)'
                            }}></div>
                            <div style={{
                                color: "#999",
                                fontWeight: 'bold',
                                fontSize: '12px',
                                marginTop: '10px'
                            }}>
                                <CheckShieldOutline fontSize={'16px'} style={{ marginRight: '5px' }} /><span>隐私保护已开启</span>
                            </div>
                        </div>
                        <div className={style['btn']}>
                            发布需求
                        </div>
                        <div className={style['tost']}>
                            当前有148位职业顾问为您服务
                        </div>
                    </div>
                </div>
            </div>
            <div className={style['status_div']}>
                <div style={{ background: '#F5F2EB' }}>
                    <div>
                        <div style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '10px' }}>新房</div>
                        <div style={{ color: '#FA6D73', fontSize: '12px' }}>热门新楼盘<RightOutline /></div>
                    </div>
                    <div><img src={red} alt="" /></div>
                </div>
                <div style={{ background: '#F0F5F8' }}>
                    <div>
                        <div style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '10px' }}>地图找房</div>
                        <div style={{ color: '#0089DE', fontSize: '12px' }}>查看好房源<RightOutline /></div>
                    </div>
                    <div><img src={blue} alt="" /></div>
                </div>
                <div style={{ background: '#ECF4F6' }}>
                    <div>
                        <div style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '10px' }}>经纪人</div>
                        <div style={{ color: '#24D316', fontSize: '12px' }}>优置业顾问<RightOutline /></div>
                    </div>
                    <div><img src={green} alt="" /></div>
                </div>
                <div style={{ background: '#F8F7F2' }}>
                    <div>
                        <div style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '10px' }}>楼市圈</div>
                        <div style={{ color: '#FB9706', fontSize: '10px' }}>楼市新动态<RightOutline /></div>
                    </div>
                    <div><img src={yellow} alt="" /></div>
                </div>
            </div>
        </div >
    )
}

export default FlatHunting